<template>
    <div class="narBar" :class="color == 'white'? 'whitebg':''">
        <div class="statusBar"></div> 
        <div class="navigator">
            <span  v-if="incon == 'arrows'" @click="goBack()">
                <img  v-if="inconColor == 'B'" class="navigator-img" :src="fhh" />
                <img v-else class="navigator-img" :src="fhb" />
            </span>
            <span  v-else style="margin-left: 12px;" @click="goBack()">×</span>
            {{ title }}
        </div> 
        <!-- <div class="statusBar" v-if="statusBar == 'true'"></div>  -->
        <!-- <div class="navigator" v-if="navigator == 'true' && flag != 'certificate'">
            <img v-if="color != 'white' && back" @click="goBack()" src="../../assets/img/common/leftIcon.png">
            <img v-else-if="color == 'white' && back" src="../../assets/img/common/leftB.png" @click="goBack()">
            <span v-else @click="goBack()">×</span>
            {{ title }}
        </div>  -->
    </div>
</template>
<script setup name="narBar">
import { useRoute } from "vue-router"
import fhb from '../../assets/img/fhb.png'
import fhh from '../../assets/img/fhh.png'
const route = useRoute()
const emits = defineEmits(['goBack'])
const statusBar = route.query.statusBar || localStorage.getItem("statusBar") 
const navigator = route.query.navigator || localStorage.getItem("navigator") 
const goBack = () => {
    emits('goBack')
}
defineProps({
    title: {
        type: String,
        default: ""
    },
    flag: {
        type: String,
        default: ""

    },
    color: {
        type: String,
        default:''
    },
    back:{
        type: Boolean,
        default: true
    },
    incon:{
        type: String,
        default: 'xMark'
        // x=>xMark
        // < =>arrows
    },
    inconColor:{
        type: String,
        default: 'W'
        // 白色=>W
        // 黑色 =>B
    }
})
</script>

<style lang="less" scoped>
.narBar {
    width: 100%;
    // background-color: #1659D6;
    background-color: #fff;
    position: fixed;
    top: 0;
    left: 0;
    overflow: hidden;
    z-index: 999;

    
    .statusBar {
        width: 100%;
        height: 30px;
    }
    .navigator {
        overflow: hidden;
        padding: 0 15px;
        text-align: center;
        width: 100%;
        height: 44px;
        font-size: 16px;
        // color: #fff;
        color: #000;
        font-weight: 500;
        line-height:  44px;
        position: relative;
      
        img {
            position: absolute;
            top: 0;
            left: 15px;
            width: 16px;
            height: 19px;
            margin-top: 14px;
        }
        span {
            position: absolute;
            top: -4px;
            left: 1px;
            display: inline-block;
            font-size: 24px;
            width: 16px;
            height: 19px;
            .navigator-img{
                width: 24px !important;
                height: 18px !important;
            }
        }
       
    }
    &.whitebg {
        background-color: #fff; 
        .navigator {
            color: #222;
        }
    }
}
</style>